<template>
    <div style="display: flex;justify-content: center">
        <div style="width: 60%">
            <h1 style="margin: 3% auto;text-align: center">修改密码</h1>
            <Form ref="passwordVoRef" :model="passwordVo" :rules="passwordVoRule" :label-width="120">
                <FormItem label="旧密码：" prop="oldPwd">
                    <Input type="password" v-model="passwordVo.oldPwd" placeholder="请输入旧密码"/>
                </FormItem>
                <FormItem label="新密码：" prop="newPwd">
                    <Input type="password" v-model="passwordVo.newPwd" placeholder="请输入新密码"/>
                </FormItem>
                <FormItem label="确认新密码：" prop="newPwdConfirm">
                    <Input type="password" v-model="passwordVo.newPwdConfirm" placeholder="请输入确认新密码"
                           @keyup.native.enter="updatePwd('passwordVoRef')"/>
                </FormItem>
                <FormItem>
                    <Button type="primary" long @click.native="updatePwd('passwordVoRef')">修 改</Button>
                </FormItem>
            </Form>
        </div>
    </div>
</template>

<script>
  export default {
    data () {
      return {
        passwordVo: {
          oldPwd: '',
          newPwd: '',
          newPwdConfirm: ''
        },
        passwordVoRule: {
          oldPwd: [{
            required: true,
            message: '密码不能为空',
            trigger: 'blur'
          }],
          newPwd: [{
            required: true,
            message: '密码不能为空',
            trigger: 'blur'
          }],
          newPwdConfirm: [{
            required: true,
            message: '密码不能为空',
            trigger: 'blur'
          }]
        }
      }
    },
    methods: {
      // 修改密码
      updatePwd (name) {
        this.$refs[name].validate(valid => {
          if (!valid) return
          if (this.passwordVo.newPwd !== this.passwordVo.newPwdConfirm) {
            this.$Message.error('两次新密码不一致，请重新输入')
            return
          }
          this.$http.patch('user', new URLSearchParams(this.passwordVo)).then(res => {
            res = res.data
            if (res.code === 2009) {
              // 提示成功
              this.$Message.success(res.msg)
              // 退出登录
              window.localStorage.removeItem('lhamster_identity_info')
              window.localStorage.removeItem('nickname')
              window.localStorage.removeItem('headPicture')
              location.reload()
            } else {
              this.$Message.error(res.msg)
            }
          })
        })
      }
    }
  }
</script>

<style scoped>

</style>
